<template>
    <div class="attentiongod">
        <scroller v-if="attentiongodlist.length>0"
                  :on-refresh="refresh"
                  :on-infinite="infinite"
        >
            <ul class="listcon">
                <li v-for="(item,index) in attentiongodlist">
                    <div class="imghead">
                        <img :src="item.di.avatar">
                        <i v-if="item.di.recommend>0">{{item.di.recommend}}</i>
                    </div>
                    <span class="middlename">
                                <strong>{{item.di.nick}}</strong><em>{{item.di.state}}</em>
                            </span>
                    <aside class="rednum">
                        <strong>{{item.di.combo}}</strong>
                        <b>连红</b>
                    </aside>
                </li>
            </ul>
        </scroller>
        <Nodata v-else type="4" spanvalue="暂无关注彩帝"/>
    </div>
</template>

<script>
    import {getMyGodListsR} from '../../service/god';
    import {getMytoken} from '../../service/common';
    import {delay} from '../../uitls/common';
    import Nodata from '../../components/Nodata.vue';
    import {concat} from 'ramda';
    export default {
        components: {Nodata},
        data() {
            return {
                attentiongodlist: [],
                page: 1
            };
        },
        created() {
            this.geattentiongodlist(1);
        },
        computed: {},
        methods: {
            async refresh(done){
                await delay(1000);
                await this.geattentiongodlist(1);
                done();
            },
            async infinite(done){
                await delay(1000);
                this.page = this.page + 1;
                const over = await this.geattentiongodlist(this.page, true);
                if(over) {
                    done(true);
                    this.page = this.page - 1;
                    return;
                }
                done();
            },
            async geattentiongodlist(page, loadmore){
                const {token} =await getMytoken();
                if(!token) {
                    return;
                }
                const {data}=await getMyGodListsR(token, page);
                if(data && data.code === 0) {
                    if(loadmore) {
                        this.attentiongodlist = concat(this.attentiongodlist, data.data.ranking);
                        return true;
                    }
                    else {
                        this.page = 1;
                        this.attentiongodlist = data.data.ranking;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .item () {
        height: 120px;
        box-sizing: border-box;
        border-bottom: 1px solid @color12;
        padding: 0 20px;
        background: #fff;
        display: flex;
        align-items: center;
        &:last-child {
            border: none;
        }
        .ranknum {
            border-radius: 50%;
            background: #f3f3f3;
            font-size: @fz26;
            color: @color2;
            width: 38px;
            .setnormalcss(38px);
            box-shadow: 0 2px 1px #b2b2b2;
            font-weight: bolder;
            &.r {
                width: 37px;
                height: 52px;
            }

            &.r0 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160543.png) no-repeat center;
                background-size: contain;
            }
            &.r1 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160544.png) no-repeat center;
                background-size: contain;
            }
            &.r2 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/20171212160545.png) no-repeat center;
                background-size: contain;
            }
        }
        .imghead {
            width: 88px;
            height: 88px;
            margin-right: 30px;
            position: relative;
            i {
                position: absolute;
                background: @color22;
                color: #fff;
                width: 30px;
                font-size: @fz24;
                .setnormalcss(30px);
                border-radius: 50%;
                right: -10px;
                top: 0;
                display: block;
            }
            img {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                box-sizing: border-box;
                border: 2px solid #bebfbf;
            }
        }
        .middlename {
            flex: 1;
            display: flex;
            align-items: center;
            strong {
                font-size: @fz32;
                font-weight: bolder;
            }
            em {
                border: 1px solid @color22;
                border-radius: 32px;
                display: inline-block;
                .setnormalcss(32px);
                color: @color22;
                font-size: @fz24;
                width: 120px;
                margin-left: 10px;
            }
        }
        .rednum {
            display: flex;
            flex-direction: column;
            text-align: center;
            strong {
                font-size: @fz48;
                color: @color22;
                line-height: 1;
                font-weight: bolder;
            }
            b {
                line-height: 1;
                font-size: @fz24;
                color: @color3;
            }
        }
    }

    .attentiongod {
        height: 100%;
    }

    .listcon {
        li {
            .item();
        }
    }
</style>